<template>
  <div @click="handleClick">App {{ count }}{{ oddOrEven }}</div>
  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
  </ul>
</template>

<script>
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const handleClick = () => {
      count.value++;
    };
    watch(
      count,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      {
        immediate: true,
      }
    );

    // 只读计算属性
    const oddOrEven = computed(() => {
      return count.value % 2 === 0 ? "偶数" : "奇数";
    });

    const person = reactive({
      name: "jack",
      age: 18,
    });

    watch(
      () => person.age,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );

    return {
      count,
      person,
      oddOrEven,
      handleClick,
    };
  },
  components: {
    Child,
  },
};
</script>

<style></style>
